import AccountButton from '@/components/settings/AccountButton';
import { getUserByUsername } from '@/lib/api/user';
import { User } from '@/lib/contexts/Auth.context';

interface ProfilePageProps {
    params: Promise<{ username: string }>;
}
export default async function Profile({ params }: ProfilePageProps) {
    const { username } = await params;

    const profileUser: User = await getUserByUsername(username);
    const icons = [
        'facebook',
        'pinterest',
        'discord',
        'artstation',
        'behance',
        'instagram',
    ] as const;

    type IconKey = (typeof icons)[number];
    return (
        <>
            <div className="flex gap-[20px] flex-col">
                <div className="flex flex-col flex-start padding-0 gap-[20px] h-[551px] w-full">
                    <div className="gradient-0 flex flex-end padding-[20px] gap-[10px] h-[350px] w-full rounded-[20px]"></div>
                    <div className="flex flex-col flex-start gap-[10px] w-full h-[181px]">
                        <div className="flex flex-col gap-1.25">
                            <p className="font-medium text-[24px]">
                                {profileUser.username}
                            </p>
                        </div>
                        <div className="flex flex-row items-center gap-1.25 h-[19px]">
                            <p>
                                {profileUser.profile?.publications_count ?? 0}{' '}
                                публикаций
                            </p>
                            <p>
                                {profileUser.profile?.collections_count ?? 0}{' '}
                                коллекций
                            </p>
                            <p>
                                {profileUser.profile?.followers_count ?? 0}{' '}
                                подписчиков
                            </p>
                            <p>
                                {profileUser.profile?.following_count ?? 0}{' '}
                                подписок
                            </p>
                        </div>
                        <div className="flex max-w-[800px] font-regular text-[12px] gap-1.25">
                            <p>{profileUser.description}</p>
                        </div>
                        <div className="flex flex-row flex-end gap-1.25">
                            {icons
                                .filter(
                                    (icon: IconKey) =>
                                        profileUser.integrations?.[icon],
                                )
                                .map((icon: IconKey) => (
                                    <a
                                        key={icon}
                                        href={profileUser.integrations![icon]!}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                    >
                                        <img
                                            src={`/profile/${icon}.svg`}
                                            alt={icon}
                                            className="w-[30px] h-[40px]"
                                        />
                                    </a>
                                ))}{' '}
                        </div>
                    </div>
                </div>
                <div className="flex flex-row space-between flex-start gap-1.25 w-full h-[42px]"></div>
                <AccountButton />
            </div>
        </>
    );
}